<template>
  <div class="people-list flex flex-column">
    <tabs-group
      style='width: 100%'
      class="flex-fixed"
      v-model="formData.is_flow"
      :data-list="tabList"
      :format="(data) => `${data.label} (${data.num})`"
      @change="() => $refs.table.load()"
    />
    <div class="flex-fixed" style="display: flex; margin: 16px 20px 6px">
      <radio-group
        v-model="formData.relation"
        :data-list="typeList"
        :replace-fields="{ key: 'key' }"
        style="margin-right: 16px"
        @change="() => $refs.table.load()"
      />
    </div>
    <div style="margin: 10px">
      <antd-form v-model="formData" :options="formOptions" @submit="() => $refs.table.load()" />
    </div>
    <common-table
      ref="table"
      class="flex-auto-height"
      :show-toolbar="false"
      :fetch="getPeopleDataAsync"
      :fetchParams="tableParams"
      :columns="columns"
      @vue:mounted="() => $refs.table.load()"
    >
      <template #avatar="{ text, scope }">
        <avatar :src="scope.head_img_url" :encryptConfirmed="true" style="width: 100%" />
      </template>
      <template #action="{ text, scope }">
        <a-button type="link" @click="goDetails(scope)">详情</a-button>
      </template>
    </common-table>
  </div>
</template>

<script>
import Avatar from '@gis/lib/components/img-viewer/index.vue';
import RadioGroup from '@gis/lib/components/radio-button-group.vue';
import CommonTable from '@gis/lib/components/vex-table/index.vue';
import TabsGroup from '@gis/lib/components/tabs-group.vue';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { setListDataValue } from '@gis/lib/utils/index.js';
import { dialog } from '@gis/lib/components/antd-dialog';
import { realityPeopleList, realityPeopleQhTypeCount } from '@gis/lib/api';
import { getEnumText } from '@gis/lib/enums/index.js';

import { openPeopleDetailsDialog } from '../people-details/peopleDetailsDialog.js';

export default {
  name: 'people-list',
  components: { TabsGroup, CommonTable, RadioGroup, Avatar },
  props: {
    details: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      type: '',
      peoples: [],
      formData: {
        is_flow: '',
        relation: '',
      },
      typeList: [
        { label: '所有', key: '所有', value: '' },
        { label: '租住', key: '租住', value: 'D0006_4' },
        { label: '从业', key: '从业', value: 'D0006_5' },
        { label: '境外人员', key: '境外人员', value: 'D0016_14' },
      ],
      formOptions: [
        {
          component: 'a-input',
          field: 'name',
          props: {
            placeholder: '请输入姓名',
            allowClear: true,
          },
        },
        {
          component: 'a-input',
          field: 'identity_num',
          props: {
            placeholder: '请输入身份证号',
            allowClear: true,
          },
        },
        {
          component: 'a-input',
          field: 'phone',
          props: {
            placeholder: '请输入电话',
            allowClear: true,
          },
        },
      ],
      columns: [
        {
          title: '头像',
          scopedSlots: { customRender: 'avatar' },
          align: 'center',
          width: 60,
        },
        {
          title: '姓名',
          dataIndex: 'name',
          ellipsis: true,
          width: 100,
        },
        {
          title: '性别',
          dataIndex: 'sex',
          customRender: (v) => getEnumText('gender', v),
          width: 60,
        },
        {
          title: '证件号码',
          dataIndex: 'identity_num',
          width: 130,
        },
        {
          title: '现居地',
          dataIndex: 'residence',
          ellipsis: true,
        },
        {
          title: '登记时间',
          dataIndex: 'create_time',
          width: 190,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: 88,
          align: 'center',
        },
      ],
      flowFixed: {}, //流动固定
    };
  },
  computed: {
    area_code() {
      const userInfoStore = useUserInfoStore();
      return userInfoStore.area_code;
    },
    basicParams() {
      return {
        area_code: this.area_code,
        yard_id: this.details.yard_id || '',
        check_status: 1,
        // type: '',
      };
    },
    //列表 - 请求参数
    tableParams() {
      return Object.assign({}, this.basicParams, this.formData);
    },
    tabList() {
      const tabList = [
        { label: '全部人口', key: '所有', value: '', num: 0 },
        { label: '常住人口', key: '户籍', value: '0', num: 0 },
        { label: '流动人口', key: '流动', value: '1', num: 0 },
      ];
      return setListDataValue(tabList, this.flowFixed, 'key', 'num');
    },
  },
  created() {
    this.getQhTypeCountAsync();
  },
  methods: {
    onTabChange(value) {
      // this.formData.is_flow = value;
      this.$refs.table.load();
      // this.$nextTick(() => {});
    },
    radioGroupFormatter(val) {
      if (val.label == '所有') return val.label;
      return `${val.label}(${val.value})`;
    },
    async getQhTypeCountAsync() {
      let params = Object.assign({}, { area_code: this.area_code, yard_id: this.details.yard_id });
      const { data = {} } = await realityPeopleQhTypeCount(params);
      this.flowFixed = data;
    },
    async getTypeListDataAsync(val) {
      const { data = {} } = await this.$axios.get('/xw-microservice/xw-analysis/v3/people_info/getBqTypeCount', {
        params: val,
      });
      this.typeList = setListDataValue(this.typeList, data, 'label');
    },
    async getPeopleDataAsync(params) {
      if (!params || !params.area_code) return;
      return await this.handleTableRes(realityPeopleList, params);
    },
    goDetails(data) {
      openPeopleDetailsDialog(data);
    },
    // goTempPeopleDetails(data) {
    //   dialog({
    //     content: () => import('@/views/reality-people/components/temp-people-details/index.vue'),
    //     contentProps: {
    //       data: data,
    //     },
    //     dialogProps: {
    //       title: `${data.name} · 个人资料`,
    //     },
    //   });
    // },
  },
};
</script>

<style lang="less">
.people-list {
  text-align: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ant-select .ant-select-selection {
  background: rgba(11, 26, 38, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  box-shadow: none;
}
</style>
